<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import type { FormType } from './index'
import { GetDetailData, PutListEdit } from '@/api/modules/account'

const router = useRouter()
const route = useRoute()

const id = route.query.id as string

const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<FormType>({
  id: 0,
  realName: '',
  userMobile: '',
  percents: 0,
  userStatus: '',
  desp: '',
})

// 提交
async function SubmitData() {
  const params = {
    ...ruleForm.value,
  }
  PutListEdit(params).then((res: any) => {
    if (res.statusCode === 200) {
      ElMessage.success('编辑成功')
      router.push({ name: 'accountIndex' })
    }
    else {
      if (typeof res.errors === 'string') {
        ElMessage.error(`编辑失败。${res.errors}`)
      }
      else {
        let errorStr = ''
        for (const key in res.errors) {
          errorStr += `${key}：${res.errors[key]}；`
        }
        ElMessage.error(`编辑失败。${errorStr}`)
      }
    }
  })
}

onMounted(async () => {
  await GetDetailData({ id }).then((res: any) => {
    if (res.statusCode === 200) {
      ruleForm.value = res.data
    }
  })
})
</script>

<template>
  <div>
    <PageHeader title="编辑" />
    <ElForm ref="ruleFormRef" label-position="top" label-width="80px" :model="ruleForm">
      <PageMain title="店铺信息">
        <ElRow :gutter="20">
          <ElCol :md="8">
            <ElFormItem label="姓名">
              <el-input v-model="ruleForm.realName" style="width: 300px;" placeholder="请输入姓名" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="手机号">
              <el-input v-model="ruleForm.userMobile" style="width: 300px;" placeholder="请输入手机号" type="number" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="分润百分比">
              <el-input v-model="ruleForm.percents" style="width: 300px;" placeholder="请输入分润百分比" type="number" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="账户状态">
              <el-radio-group v-model="ruleForm.userStatus">
                <el-radio :value="1">
                  启用
                </el-radio>
                <el-radio :value="2">
                  冻结
                </el-radio>
              </el-radio-group>
            </ElFormItem>
          </ElCol>
          <ElCol :md="24">
            <ElFormItem label="描述">
              <el-input v-model="ruleForm.desp" style="max-width: 550px;" placeholder="请输入描述" type="textarea" />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
    </ElForm>
    <div style="height: 80px;" />
    <FixedActionBar>
      <ElButton type="primary" size="large" @click="SubmitData()">
        提交
      </ElButton>
    </FixedActionBar>
  </div>
</template>

<style lang="scss" scoped>
.box {
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
}

.card-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
</style>
